<script lang="tsx" setup>
import { computed, onMounted, PropType, reactive, ref } from 'vue'
import ReProTable from '@/components/ReProTable'
import type { PaginationProps } from '@/components/table'
import type {
  EasyProTableColumn,
  EasyProTableOptions
} from '@/components/ReProTable/src/types'
import { _queryMenus } from '@/api/auth'

const columns = computed<EasyProTableColumn[]>(() => {
  return [
    {
      label: '序号',
      type: 'index',
      width: 80,
      align: 'center'
    },
    {
      label: '名称',
      prop: 'zhName',
      type: 'input',
      search: true
    },
    {
      label: 'name',
      prop: 'name',
      type: 'input',
      search: true
    },
    {
      label: 'path',
      prop: 'path'
    },
    {
      label: '组件',
      prop: 'component'
    },
    {
      label: '描述',
      prop: 'description'
    },
    {
      label: '排序',
      prop: 'order'
    },
    {
      label: '创建时间',
      prop: 'createTime',
      formatter: (row: any) => {
        return new Date(row.createTime).toLocaleString()
      }
    },
    {
      label: '操作',
      cellRenderer: (data: any) => {
        return (
          <el-button type="primary" link>
            编辑
          </el-button>
        )
      }
    }
  ]
})

const data = ref()
const searchForm = ref({
  zhName: '',
  email: '',
  path: ''
})

/** 分页配置 */
const pagination = reactive<PaginationProps>({
  pageSize: 10,
  currentPage: 1,
  total: 0
})

const getList = () => {
  _queryMenus({}).then(res => {
    data.value = res.data
  })
}
const tableRef = ref(null)
onMounted(() => {
  getList()
})

const options: EasyProTableOptions = {
  searchLayout: { span: 6, gutter: 50 },
  searchBtnText: '搜索',
  tableHeight: '500px'
}
</script>

<template>
  <div>
    {{ searchForm }}
    <ReProTable
      ref="tableRef"
      v-model:searchForm="searchForm"
      :data="data"
      :columns="columns"
      :options="options"
      :pagination="pagination"
      :toolbar="{
        title: '测试title'
      }"
      @search="getList"
    />
  </div>
</template>
